<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理员 - 管理界面</title>
    <link href="/css/H-ui.min.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="/css/backstage.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/js/lib/jquery-3.5.1.min.js"></script>
    <script src="/js/lib/layer/layer.min.js"></script>
    <link href="/css/popmenu.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/js/popmenu.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navigationBar">
        <h1>管理界面</h1>
    </div>
    <!--所有用户列表-->
    <div id="user-list" class="user-list panel panel-default">

        <table class="table table-border table-bordered table-bg table-hover">
            <thead class="text-c">
            <tr>
                <th>用户列表</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="user in users"><td @click="select(user.id, user.username, user.role.id)"
                                              :class="user.id===selected?'selected':''">{{user.username}}</td></tr>
            </tbody>
        </table>
    </div>
    <!--视图区-->
    <div id="tab-management" class="permission-view HuiTab">
        <div class="tabBar clearfix"><span>用户管理</span><span>角色管理</span><span>权限管理</span><span>我的信息</span></div>
        <!--账号操作-->
        <div class="tabCon user-info">
            <div class="panel panel-primary f-l role-info">
                <div class="panel-header">账号配置</div>
                <div class="panel-body">
                    <div id="user-info" class="user-info-operating">
                        <div class="mt-10">
                            <label>
                                <span>账号</span>
                                <input type="text"  class="input-text radius size-M" v-model="username">
                            </label>
                        </div>
                        <div class="mt-10">
                            <label>
                                <span>密码</span>
                                <input type="password"  class="input-text radius size-M" v-model="password">
                            </label>
                        </div>
                        <div class="mt-10">
                            <label>
                                <span>权限角色</span>
                                <span class="select-box radius">
                            <select class="select" v-model="role">
                                <option value="" selected>--请分配权限角色--</option>
                                <option v-for="role in roles" v-bind:value="role.id">{{role.name}}</option>
                            </select>
                        </span>
                            </label>
                        </div>
                        <div class="mt-20">
                            <input :class="uid===null?'btn disabled radius':'btn btn-primary radius'"
                                   type="button" value="点击修改" @click="modify(uid, username, password, role)">
                            <input :class="uid===null?'btn disabled radius':'btn btn-danger radius'"
                                   type="button" value="删除账号" @click="del(uid)">
                            <input class="btn btn-secondary radius" type="button" @click="addUser(username, password, role)" value="添加新账号">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--角色操作-->
        <div id="role-info" class="tabCon role-management">
            <!--角色列表-->
            <div class="role-management f-l">
                <div class="role-list">
                    <table class="table table-border table-bordered table-bg table-hover">
                        <thead class="text-c">
                        <tr>
                            <th>角色列表</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr v-for="role in roles" class="va-m text-c"
                                :class="selected!=null&&role.id===selected.id?'selected va-m text-c':'va-m text-c'"
                                @click="select(role)"
                            ><td>{{role.name}}</td></tr>
                            <tr><td class="va-m text-c" @click="addRole()">--点击添加角色--</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--权限角色配置-->
            <div class="role-info-box">
                <div class="panel panel-primary f-l role-info">
                    <div class="panel-header">权限角色配置</div>
                    <div class="panel-body role-info-content">
                        <div class="mb-10">当前选中角色 ：<b>{{selected!=null?selected.name:''}} </b></div>
                        <hr>
                        <div class="mb-10">赋予权限：</div>
                        <div class="mb-5" v-for="pType in permissionList">
                            <span>{{pType.name}} : </span>
                            <span class="mr-5" v-for="permission in pType.permissions">
                                <label><input type="checkbox" v-model="permission.selected">{{permission.name}}</label>
                            </span>
                        </div>
                        <div style="text-align: center">
                            <input :class="selected===null?'btn disabled radius':'btn btn-primary radius'"
                                   type="button" value="点击授权" @click="authorize(selected.id)">
                            <input :class="selected===null?'btn disabled radius':'btn btn-danger radius'"
                                   type="button" value="删除角色" @click="del(selected.id)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--权限操作-->
        <div id="permission-info" class="tabCon permission-management">
            <!--权限类型列表-->
            <div class="role-management f-l">
                <div class="role-list">
                    <table class="table table-border table-bordered table-bg table-hover">
                        <thead class="text-c">
                        <tr>
                            <th>权限类型</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr v-for="pType in pTypes">
                                <td class="va-m text-c"
                                    @click="selectPType(pType)"
                                    @contextmenu.prevent="popupMenu(pType)"
                                    :class="selected_pType!==null&&selected_pType.id===pType.id?'selected':''"
                            >{{pType.name}}</td></tr>
                            <tr><td class="va-m text-c" @click="addPType()">--点击添加权限类型--</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--权限列表-->
            <div class="role-management f-l">
                <div class="role-list">
                    <table class="table table-border table-bordered table-bg table-hover">
                        <thead class="text-c">
                        <tr>
                            <th>权限列表</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr v-for="permission in permissions">
                                <td class="va-m text-c"

                                    @click="selectPermission(permission)"
                                    :class="selected_permission!==null&&selected_permission.id===permission.id?'selected':''"
                            >{{permission.name}}</td></tr>
                            <tr><td class="va-m text-c" v-show="selected_pType!==null" @click="addPermission(selected_pType.id)">--点击添加权限--</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--权限配置-->
            <div class="permission-info-box">
                <div class="panel panel-primary permission-info">
                    <div class="panel-header">权限配置</div>
                    <div class="panel-body">
                        <div class="user-info-operating">
                            <div class="mt-10">
                                <label>
                                    <span>权限名</span>
                                    <input type="text" v-model="input_permission.name" class="input-text radius size-M" >
                                </label>
                            </div>
                            <div class="mt-10">
                                <label>
                                    <span>权限说明</span>
                                    <input type="text" v-model="input_permission.desc" class="input-text radius size-M" >
                                </label>
                            </div>
                            <div class="mt-10">
                                <label>
                                    <span>资源地址</span>
                                    <input type="text" v-model="input_permission.link" class="input-text radius size-M" >
                                </label>
                            </div>
                            <div class="mt-20 text-c">
                                <input :class="selected_permission!==null?'btn btn-secondary radius':'btn disabled radius'"
                                       type="button" value="修改权限" @click="modifyPermission()">
                                <input :class="selected_permission!==null?'btn btn-danger radius':'btn disabled radius'"
                                        type="button" value="删除权限" @click="delPermission()">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabCon">
            <div id="my-info" class="panel panel-secondary my-info">
                <div class="panel-header">我的信息</div>
                <div class="panel-body">
                    <div class="mb-10"><h3><span>账号：</span>{{username}}</h3></div>
                    <div class="mb-10"><h3><span>角色：</span>{{role_name}}</h3></div>
                    <div class="mb-10"><button class="btn btn-primary radius" @click="logout()">注销登录</button></div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/lib/vue.js"></script>
    <script src="../js/manager.js"></script>
</body>
</html>